import React from 'react';
import { Icon, Menu, Dropdown } from 'antd';
import LinkTo from '@/components/LinkTo';
import styles from './MoreBar.less';

const MoreMenuBtn = ({ menuData = [] }) => {
    const menu = (
        <Menu className={styles.dropMenu}>
            {menuData.map(item => (
                <Menu.Item key={item.title} onClick={() => {}}>
                    {item.title}
                </Menu.Item>
            ))}
        </Menu>
    );
    return (
        <Dropdown overlay={menu} trigger={['click']} placement="bottomRight">
            <div className={styles.moreMenu}>
                <Icon type="more" />
            </div>
        </Dropdown>
    );
};

/**
 * 右上角的更多
 * @param {*} props
 */
const MoreBar = props => (
    <div className={styles.btnTool}>
        <LinkTo {...props.linkProps} className={styles.btn}>
            更多
        </LinkTo>
        <MoreMenuBtn {...props} />
    </div>
);

export default MoreBar;
